<template>
  <el-form inline label-width="auto" size="medium" class="search-form" v-loading.fullscreen.lock="loading">
    <el-form-item label="商品名">
      <el-input v-model="search.goodsName" class="search-input"></el-input>
    </el-form-item>
    <el-form-item label="总店">
      <el-select filterable clearable v-model="search.branchId" class="search-input" :disabled="inputLoading">
        <el-option v-for="branch in branchList" :key="branch.id" :value="branch.id" :label="branch.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="分店">
      <el-select filterable clearable v-model="search.partnerId" class="search-input" :disabled="inputLoading">
        <el-option v-for="partner in partnerList" :key="partner.id" :value="partner.id" :label="partner.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="状态">
      <el-select clearable v-model="search.status" class="search-input">
        <el-option v-for="item in statusList" :key="item.value" :value="item.value" :label="item.label">
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
  import BranchApi from 'services/branchApi';
  import PermissionApi from 'services/permissionApi';

  export default {
    props: {
      search: {
        type: Object,
        required: true
      }
    },

    watch: {
      "search.branchId"() {
        this.setPartnerList();
      }
    },

    data() {
      return {
        loading: false,
        inputLoading: false,
        branchList: [],
        partnerList: [],
        statusList: this.i18n.getDropDown('goods.goodsDefs.status', [-1, 0, 1])
      };
    },

    created() {
      this.loading = true;
      this.setBranchList().then(() => {
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    methods: {
      setBranchList() {
        return BranchApi.getBranchList().then(branchList => {
          this.branchList = branchList;
          return branchList;
        });
      },

      setPartnerList() {
        let branchId = this.search.branchId;
        if (branchId === '') {
          this.partnerList = [];
          this.search.partnerId = '';
          return;
        }
        this.inputLoading = true;
        PermissionApi.getPartners(branchId).then(partnerList => {
          let partnerId = this.search.partnerId;
          let partner = _.find(partnerList, {
            id: partnerId
          });
          this.partnerList = partnerList;
          if (partner === undefined) {
            this.search.partnerId = '';
          }
          this.inputLoading = false;
        }).catch(() => {
          this.inputLoading = false
        });
      }
    }
  };

</script>

<style lang="scss" scoped>
  @import '~viewStyle/searchForm';

</style>
